<template>
  <div class="newsnotice">
    <div class="newsnotice_main">
      <div class="card_top">
        <el-card
          :body-style="{ padding: '10' }"
          style="text-align: left;"
          v-loading="loading"
        >
          <div slot="header" class="clearfix">
            <div>
              <span style="font-weight:600">消息通知</span>
              <span style="font-size:12px"
                >(共{{ allcount }}封,其中{{ unread }}封未读,<el-button
                  type="text"
                  @click="getunread"
                  style="color:blue;font-size:12px"
                  >仅查看未读消息)</el-button
                ></span
              >
            </div>
          </div>
          <div class="tabs">
            <div class="tabs_top">
              <el-button type="primary" plain @click="getall">
                <el-badge
                  v-if="unread > 0"
                  :value="unread"
                  :max="99"
                  class="item"
                >
                  全部
                </el-badge>
                <div v-else>
                  全部
                </div>
              </el-button>
              <!-- <div> -->
              <div v-for="item in classData" :key="item.title">
                <el-dropdown @command="handleCommand">
                  <el-button type="primary" plain>
                    <el-badge
                      :value="item.count"
                      :max="99"
                      class="item"
                      v-if="item.count > 0"
                    >
                      {{ item.title }}
                    </el-badge>
                    <div v-else>{{ item.title }}</div>
                  </el-button>
                  <el-dropdown-menu
                    slot="dropdown"
                    size="medium"
                    class="dropdown_menu"
                    style="width:148px"
                  >
                    <el-dropdown-item
                      v-for="data in item.data"
                      :key="data.id"
                      :command="data.id"
                    >
                      <div>
                        <el-badge
                          v-if="data.count > 0"
                          :value="data.count"
                          :max="99"
                          class="item"
                        >
                          {{ data.title }}
                        </el-badge>
                        <div v-else>{{ data.title }}</div>
                      </div>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <!-- </div> -->
              </div>
              <!-- <el-dropdown>
                <el-button type="primary" plain>
                  <el-badge :value="200" :max="99" class="item">
                    处罚通知
                  </el-badge>
                </el-button>

                <el-dropdown-menu
                  slot="dropdown"
                  style="width:148px"
                  class="dropdown_menu"
                >
                  <el-dropdown-item>
                    <el-badge :value="200" :max="99" class="item">
                      信用通知
                    </el-badge></el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown> -->
            </div>
            <div class="tabs_bot">
              <el-button type="primary" plain @click="doread(1)">
                标记为已读
              </el-button>
              <el-button type="primary" plain @click="doread(2)">
                全部标记已读
              </el-button>
            </div>
          </div>
          <!-- 表格 -->
          <div class="table_box">
            <!-- :cell-style="rowClass" -->
            <!-- highlight-current-row -->
            <!-- @current-change="handleCurrentChange" -->
            <!-- ref="singleTable" -->
            <el-table
              :header-cell-style="headClass"
              v-loading="loading"
              :data="tableData"
              style="width: 100%"
              @selection-change="handleSelectionChange"
            >
              <!-- :row-class-name="tableRowClassName" -->
              <el-table-column type="selection" width="55"> </el-table-column>
              <!-- fixed -->

              <el-table-column prop="news" label="消息内容">
                <template slot-scope="scope">
                  <div style="text-align:left">
                    <div>尊敬的用户,您好!</div>
                    <div>
                      您提交的商品,产品ID为:{{ scope.row.goods_id }},
                      <span v-if="scope.row.type == 1"
                        >商品已经通过! <a>【查看】</a></span
                      >
                      <span v-if="scope.row.type == 2"
                        >拒绝理由为【{{
                          scope.row.xj_info
                        }}】请谨慎填写商品信息,确保准确提交!
                      </span>
                      <span v-if="scope.row.type == 3"
                        >商品佣金由{{ scope.row.goods_price }}变为{{
                          scope.row.new_price
                        }}
                      </span>
                      <span v-if="scope.row.type == 4"
                        >商品因为【{{ scope.row.xj_info }}】被下架
                      </span>
                      <span v-if="scope.row.type == 5"
                        >因【{{
                          scope.row.xj_info
                        }}】被管理员操作扣除积分:-2,请谨慎填写商品信息,确保准确提交!
                      </span>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="create_at" label="接收时间">
                <template slot-scope="scope">
                  <div style="text-align:center">
                    {{ scope.row.create_at }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="信息类型">
                <template slot-scope="scope">
                  <div style="text-align:center">
                    <div v-if="scope.row.type == 1">
                      <el-badge
                        is-dot
                        class="item"
                        v-if="scope.row.status == 1"
                      >
                        产品通知-通过
                      </el-badge>
                      <div v-else>
                        产品通知-通过
                      </div>
                    </div>
                    <div v-if="scope.row.type == 2">
                      <el-badge
                        is-dot
                        class="item"
                        v-if="scope.row.status == 1"
                      >
                        产品通知-拒绝
                      </el-badge>
                      <div v-else>
                        产品通知-拒绝
                      </div>
                    </div>
                    <div v-if="scope.row.type == 3">
                      <el-badge
                        is-dot
                        class="item"
                        v-if="scope.row.status == 1"
                      >
                        产品通知-佣金变动
                      </el-badge>
                      <div v-else>
                        产品通知-佣金变动
                      </div>
                    </div>
                    <div v-if="scope.row.type == 4">
                      <el-badge
                        is-dot
                        class="item"
                        v-if="scope.row.status == 1"
                      >
                        产品通知-下架
                      </el-badge>
                      <div v-else>
                        产品通知-下架
                      </div>
                    </div>
                    <div v-if="scope.row.type == 5">
                      <el-badge
                        is-dot
                        class="item"
                        v-if="scope.row.status == 1"
                      >
                        处罚通知-信用积分
                      </el-badge>
                      <div v-else>
                        处罚通知-信用积分
                      </div>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div style="width:100%;text-align:right">
              <!-- 分页器 -->
              <!-- @size-change="handleSizeChange" -->
              <!-- background -->
              <el-pagination
                @current-change="handleCurrentChange2"
                :current-page="currentPage"
                :page-size="pagesize"
                :pager-count="11"
                layout="total, prev, pager, next, jumper"
                :total="count"
              >
                <!-- :page-sizes="[100, 200, 300, 400]" -->
              </el-pagination>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getMsgNews,
  getMsgClass,
  updateMsgStatus
} from "@/api/userinfo/userinfo";
export default {
  filters: {
    formatTime: function(datetime, fmt) {
      var date = new Date(datetime);
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      var o = {
        "M+": date.getMonth() + 1,
        "d+": date.getDate(),
        "h+": date.getHours(),
        "m+": date.getMinutes(),
        "s+": date.getSeconds()
      };
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          var str = o[k] + "";
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1 ? str : ("00" + str).substr(str.length)
          );
        }
      }
      return fmt;
    }
  },
  name: "newsnotice",
  data() {
    return {
      unread: 0, //未读总数
      allcount: 0, //所有总数
      disabled: false,
      pagesize: 30,
      currentPage: 1,
      count: 0,
      loading: true,
      // activeName: "1",
      searchipt: "",
      type: "",
      status: "",
      classData: [],
      tableData: [],
      chooseList: []
    };
  },

  computed: {},
  created() {
    // this.getAuditList(1, 30, this.type, "");
    this.getMsgClass();
    this.getMsgNews();
  },
  mounted() {},
  methods: {
    getall() {
      this.type = "";
      this.status = "";
      this.getMsgNews();
    },
    getunread() {
      this.getMsgNews("", 1);
    },
    // 未读表格背景高亮
    tableRowClassName({ row }) {
      console.log("row", row);
      if (row.status == 1) {
        return "warning-row";
      } else {
        return "success-row";
      }
      // return "";
    },
    // 已读事件
    doread(val) {
      if (val == 1) {
        console.log(this.chooseList);
        if (this.chooseList.length > 0) {
          let idstr = "";
          for (var k = 0; k < this.chooseList.length; k++) {
            idstr += this.chooseList[k].id + ",";
          }
          console.log(idstr);
          this.updateMsgStatus(idstr);
        }
      } else {
        console.log(this.tableData);
        if (this.tableData.length > 0) {
          let arr = [];
          for (var j = 0; j < this.tableData.length; j++) {
            if (this.tableData[j].status == 1) {
              arr.push(this.tableData[j]);
            }
            // idstr2 += this.tableData[j].id + ",";
          }
          if (arr.length > 0) {
            let idstr2 = "";
            for (var h = 0; h < arr.length; h++) {
              idstr2 += arr[h].id + ",";
            }
            console.log(idstr2);
            this.updateMsgStatus(idstr2);
          }
          if (arr.length == 0) {
            this.$message.info("当前消息已全部已读!");
          }
        }
      }
    },
    // 下拉框
    handleCommand(val) {
      console.log(val);
      this.type = val;
      this.getMsgNews(val, this.status);
    },
    // 多选
    handleSelectionChange(val) {
      this.chooseList = val;
      console.log(this.chooseList);
    },
    // 分页
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getAuditList(this.currentPage, 30, this.searchipt, "");
    },
    //已读请求
    updateMsgStatus(msg_id) {
      updateMsgStatus({
        msg_id: msg_id
      })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取分类
    getMsgClass() {
      getMsgClass()
        .then(res => {
          this.classData = res.data;
          console.log("消息分类", this.classData);
          this.loading = false;
          var num = 0;
          var num2 = 0;
          for (var i = 0; i < this.classData.length; i++) {
            num += this.classData[i].count;
            num2 += this.classData[i].all_count;
            // console.log("for", this.classData[i].all_count);
          }
          // console.log(num);
          // console.log(num2);
          this.unread = num; //未读总数量
          this.allcount = num2; //总数量
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取列表
    getMsgNews(type, status) {
      getMsgNews({
        type: type == "" ? undefined : type,
        status: status == "" ? undefined : status
      })
        .then(res => {
          console.log("消息列表", res.data);
          this.count = res.data.count;
          this.tableData = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },

    // 表头背景色
    headClass() {
      return "text-align: center;background:#eef1f6;";
    },
    // 表格样式设置
    rowClass() {
      return "text-align: center;";
    },
    // 表格选中行高亮
    setCurrent(row) {
      this.$refs.singleTable.setCurrentRow(row);
    },
    handleCurrentChange(val) {
      this.currentRow = val;
    }
  }
};
</script>

<style lang="less" scoped>
.table_box::v-deep {
  .el-table .warning-row {
    background: rgba(0, 128, 79, 0.13);
  }

  .el-table .success-row {
    background: rgba(249, 198, 198, 0.14);
  }
  .cell {
    padding-top: 5px;
  }
}
.newsnotice {
  .tabs::v-deep {
    .tabs_top {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .el-badge__content.is-fixed {
        top: -2px;
        right: 7px;
      }
      .el-button {
        padding: 12px 45px;
        border-radius: unset;
      }
    }
    .tabs_bot {
      margin-top: 8px;
      margin-bottom: 8px;
      .el-button {
        padding: 9px 30px;
        border-radius: unset;
      }
    }
  }
}
</style>
<style lang="less">
.dropdown_menu {
  .el-badge__content.is-fixed {
    top: 8px;
    right: 7px;
  }
}
</style>
